<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Demo</title>
    <link href="../../static/layui/css/layui.css" rel="stylesheet">
    <script src="../../static/layui/layui.js"></script>
    <style>
        .container {
            padding: 25px;
        }
    </style>
</head>
<body>
<!--行工具栏模板-->
<script type="text/html" id="lineBar">
    <div class="layui-clear-space">
        <a class="layui-btn layui-btn-xs layui-bg-green" lay-event="edit">编辑</a>
        <a class="layui-btn layui-btn-xs layui-bg-red" lay-event="delete">删除</a>
    </div>
</script>
<!--头部工具栏模板-->
<script type="text/html" id="headerBar">
    <div class="layui-clear-space">
        <a class="layui-btn layui-btn-sm" lay-event="add">新增</a>
    </div>
</script>

<div class="container">
    <div class="search">
        <form class="layui-form userForm layui-row layui-col-space16">
            <div class="layui-col-md4">
                <div class="layui-input-wrap">
                    <div class="layui-input-prefix">
                        <i class="layui-icon layui-icon-username"></i>
                    </div>
                    <input type="text" name="courseName" value="" placeholder="请输入课程名称" class="layui-input">
                </div>
            </div>
            <div class="layui-col-md4">
                <button class="layui-btn" lay-submit lay-filter="table-search">搜索</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </form>
    </div>
    <table class="layui-hide" id="ID-table-demo-data" lay-filter="course-filter"></table>
</div>
<script>
    layui.use(function () {
        // 获取表格对象
        let table = layui.table,
            $ = layui.$,
            form = layui.form,
            layer = layui.layer;
        // 已知数据渲染
        let host = "http://localhost:8080/ssm/course/coursePicture?uuid="
        let inst = table.render({
            elem: '#ID-table-demo-data',
            id:'course',
            url: "/ssm/course/page",
            toolbar: '#headerBar',
            cols: [[
                {field: 'courseName', title: '课程名称'},
                {field: 'coachName', title: '教练'},
                {field: 'type', title: '课程类型'},
                {
                    field: 'img', title: '课程图片', minWidth: 160, templet: function (row) {
                        return '<div>' +
                            '<img src="'+host+row.img+'" style="width: 80px;height: 80px;">'+
                            '</div>'
                    }
                },
                {field: 'price', title: '价格'},
                {field: 'comment', title: '课程介绍'},
                {field: 'createTime', title: '创建时间'},
                {fixed: 'right', title: '操作', width: 134, minWidth: 125, toolbar: '#lineBar'}
            ]],
            skin: 'line',
            even: true,
            page: true,
            limits: [5, 10, 15],
            limit: 5
        });

        table.on('toolbar(course-filter)', function (obj) {
            let id = obj.config.id;
            let checkStatus = table.checkStatus(id);
            let infos = checkStatus.data
            let ids = infos.map(info => info.id);
            switch (obj.event) {
                case 'add':
                    layer.open({
                        title: '新增',
                        type: 2,
                        area: ['40%', '85%'],
                        end:function(){
                            table.reload("course",{
                                url:'/ssm/course/page',
                                page:{
                                    curr:1,
                                    limit: 5
                                }
                            })
                        },
                        content: 'add.html'
                    });
                    //  发送异步请求
                    break;
                case 'batchDelete':
                    //  发送异步请求
                    break;
            }
            ;
        });

        // 触发单元格工具事件
        table.on('tool(course-filter)', function (obj) { // 双击 toolDouble
            let data = obj.data; // 获得当前行数据
            if (obj.event === 'edit') {
                // 根据课程id 获取课程信息
                $.get('/ssm/course/getById',{id:data.id},function (res) {
                    if (res.code==0){
                        sessionStorage.setItem("course",JSON.stringify(res.data));
                    }
                    layer.open({
                        title: '编辑',
                        type: 2,
                        area: ['40%', '85%'],
                        end:function(){
                            table.reload("course",{
                                url:'/ssm/course/page',
                                page:{
                                    curr:1,
                                    limit: 5
                                }
                            })
                        },
                        content: 'edit.html'
                    });
                })


            } else if (obj.event === 'delete') {
                //  发送异步请求
                $.ajax({
                    url:'/ssm/course/delete',
                    data:{uuid:data.img,id:data.id},
                    type:"get",
                    dataType:'json',
                    success:function (res){
                        if (res.code==0){  //  删除成功
                            layer.msg(res.message,{icon:1},function (){
                                table.reload("course",{
                                    url:'/ssm/course/page',
                                    page:{
                                        curr:1,
                                        limit: 5
                                    }
                                })
                            })
                        }else{
                            layer.msg(res.message,{icon:2})
                        }
                    }
                })
            }
        });
        // 监听表单事件
        form.on('submit(table-search)',function (obj){
            let  searchData = obj.field;
            //  重载表格数据
            table.reload('course', {
                where: {
                    courseName:searchData.courseName
                }
            });
            return false;
        })
    });
</script>

</body>
</html>
